<template>
  <div>
    <div class="mavonEditor">
      <el-form ref="form" :model="blog" label-width="80px" :label-position="labelPosition">
        <el-form-item label="标题">
          <el-input v-model="blog.blogTitle" size="medium"></el-input>
        </el-form-item>
        <!-- 中部 -->
        <el-row>
          <!-- 上传图片 -->
          <el-col :span="8">
            <el-form-item label="封面">
              <el-upload
                class="avatar-uploader"
                :action="uploadUrl"
                :show-file-list="false"
                :on-success="uploadSuccess"
                :headers="headers"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-form-item>
          </el-col>
          <!-- 发布和分类 -->
          <el-col :span="8">
            <el-row>
              <el-form-item label="是否置顶">
                <el-switch v-model="topOne" active-text="是" inactive-text="否"></el-switch>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="分类">
                <el-select v-model="blog.blogType" placeholder="请选择">
                  <el-option
                    v-for="type in typeList"
                    :key="type.typeId"
                    :label="type.typeName"
                    :value="type.typeId"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-row>
          </el-col>
          <!-- 简介 -->
          <el-col :span="8">
            <el-form-item label="简介">
              <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="blog.blogRemark"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <mavon-editor v-model="blog.blogContent" :toolbars="toolbars" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">保存</el-button>
          <el-button type="warning" @click="onSubmit">发布</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 附件按钮 -->
    <div class="right-button" @click="openDrawer">
      <el-button type="success" icon="el-icon-picture" circle></el-button>
    </div>
    <!-- 附件抽屉 -->
    <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false" size="300px">
      <span>我来啦!</span>
    </el-drawer>
  </div>
</template>
<script>
import blogApi from "@/api/blog";
import { getToken } from "@/utils/auth";
export default {
  data() {
    return {
      context: " ", //输入的数据
      toolbars: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        mark: true, // 标记
        superscript: true, // 上角标
        quote: true, // 引用
        ol: true, // 有序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        help: true, // 帮助
        code: true, // code
        subfield: true, // 是否需要分栏
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        /* 1.3.5 */
        undo: true, // 上一步
        trash: true, // 清空
        save: true, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: true // 导航目录
      },
      blog: {},
      labelPosition: "top",
      typeList: this.$store.getters.typeList,
      drawer: false,
      imageUrl: null, // 上传图片回显
      headers: {
        // 上传文件的请求头
        Authorization: getToken()
      },
      uploadUrl: process.env.VUE_APP_UPLOAD_URL, // 上传图片路径
      topOne:true
    };
  },
  methods: {
    onSubmit() {
      blogApi.save(this.blog).then(res => {
        this.$message.success(res.msg);
      });
    },
    openDrawer() {
      //打开抽屉
      this.drawer = true;
    },
    closeDrawer() {
      //关闭抽屉
      this.drawer = false;
    },
    uploadSuccess(res, file) {
      this.imageUrl = res.data
      this.blog.blogImage = res.data
    }
  }
};
</script>


<style>
.mavonEditor {
  width: 95%;
  height: 100%;
  margin: 15px auto;
}
.right-button {
  text-align: right;
  position: absolute;
  right: 0%;
  bottom: 0%;
  margin: 30px;
}
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
